Flutter 布局(一)- Container详解

本文主要介绍Flutter中非常常见的Container,列举了一些实际例子介绍如何使用。

1. 简介

A convenience widget that combines common painting, positioning, and sizing widgets.

Container在Flutter中太常见了。官方给出的简介,是一个结合了绘制(painting)、定位(positioning)以及尺寸(sizing)widget的widget。

可以得出几个信息,它是一个组合的widget,内部有绘制widget、定位widget、尺寸widget。后续看到的不少widget,都是通过一些更基础的widget组合而成的。

1.1 组成

Container的组成如下:

  • 最里层的是child元素;
  • child元素首先会被padding包着;
  • 然后添加额外的constraints限制;
  • 最后添加margin。

Container的绘制的过程如下:

  • 首先会绘制transform效果;
  • 接着绘制decoration;
  • 然后绘制child;
  • 最后绘制foregroundDecoration。

Container自身尺寸的调节分两种情况:

  • Container在没有子节点(children)的时候,会试图去变得足够大。除非constraints是unbounded限制,在这种情况下,Container会试图去变得足够小。
  • 带子节点的Container,会根据子节点尺寸调节自身尺寸,但是Container构造器中如果包含了width、height以及constraints,则会按照构造器中的参数来进行尺寸的调节。

1.2 布局行为

由于Container组合了一系列的widget,这些widget都有自己的布局行为,因此Container的布局行为有时候是比较复杂的。

一般情况下,Container会遵循如下顺序去尝试布局:

  • 对齐(alignment);
  • 调节自身尺寸适合子节点;
  • 采用width、height以及constraints布局;
  • 扩展自身去适应父节点;
  • 调节自身到足够小。

进一步说:

  • 如果没有子节点、没有设置width、height以及constraints,并且父节点没有设置unbounded的限制,Container会将自身调整到足够小。
  • 如果没有子节点、对齐方式(alignment),但是提供了width、height或者constraints,那么Container会根据自身以及父节点的限制,将自身调节到足够小。
  • 如果没有子节点、width、height、constraints以及alignment,但是父节点提供了bounded限制,那么Container会按照父节点的限制,将自身调整到足够大。
  • 如果有alignment,父节点提供了unbounded限制,那么Container将会调节自身尺寸来包住child;
  • 如果有alignment,并且父节点提供了bounded限制,那么Container会将自身调整的足够大(在父节点的范围内),然后将child根据alignment调整位置;
  • 含有child,但是没有width、height、constraints以及alignment,Container会将父节点的constraints传递给child,并且根据child调整自身。

另外,margin以及padding属性也会影响到布局。

1.3 继承关系

  1. Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container

从继承关系可以看出,Container是一个StatelessWidget。Container并不是一个最基础的widget,它是由一系列的基础widget组合而成。

2. 源码解析

构造函数如下:

  1. Container({
  2. Key key,
  3. this.alignment,
  4. this.padding,
  5. Color color,
  6. Decoration decoration,
  7. this.foregroundDecoration,
  8. double width,
  9. double height,
  10. BoxConstraints constraints,
  11. this.margin,
  12. this.transform,
  13. this.child,
  14. })

平时使用最多的,也就是padding、color、width、height、margin属性。

2.1 属性解析

key:Container唯一标识符,用于查找更新。

alignment:控制child的对齐方式,如果container或者container父节点尺寸大于child的尺寸,这个属性设置会起作用,有很多种对齐方式。

padding:decoration内部的空白区域,如果有child的话,child位于padding内部。padding与margin的不同之处在于,padding是包含在content内,而margin则是外部边界,设置点击事件的话,padding区域会响应,而margin区域不会响应。

color:用来设置container背景色,如果foregroundDecoration设置的话,可能会遮盖color效果。

decoration:绘制在child后面的装饰,设置了decoration的话,就不能设置color属性,否则会报错,此时应该在decoration中进行颜色的设置。

foregroundDecoration:绘制在child前面的装饰。

width:container的宽度,设置为double.infinity可以强制在宽度上撑满,不设置,则根据child和父节点两者一起布局。

height:container的高度,设置为double.infinity可以强制在高度上撑满。

constraints:添加到child上额外的约束条件。

margin:围绕在decoration和child之外的空白区域,不属于内容区域。

transform:设置container的变换矩阵,类型为Matrix4。

child:container中的内容widget。

2.2 一个例子

  1. new Container(
  2. constraints: new BoxConstraints.expand(
  3. height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  4. ),
  5. decoration: new BoxDecoration(
  6. border: new Border.all(width: 2.0, color: Colors.red),
  7. color: Colors.grey,
  8. borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
  9. image: new DecorationImage(
  10. image: new NetworkImage('http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
  11. centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
  12. ),
  13. ),
  14. padding: const EdgeInsets.all(8.0),
  15. alignment: Alignment.center,
  16. child: new Text('Hello World',
  17. style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black)),
  18. transform: new Matrix4.rotationZ(0.3),
  19. )

这是官方文档给出例子的一个变种,包含属性比较全,可以看下其用法。实际运行效果如下:

Container属性用法

其中decoration可以设置边框、背景色、背景图片、圆角等属性,非常实用。对于transform这个属性,一般有过其他平台开发经验的,都大致了解,这种变换,一般不是变换的实际位置,而是变换的绘制效果,也就是说它的点击以及尺寸、间距等都是按照未变换前的。

2.3 源码

  1. decoration = decoration ?? (color != null ? new BoxDecoration(color: color) : null),

可以看出,对于颜色的设置,最后都是转换为decoration来进行绘制的。如果同时包含decoration和color两种属性,则会报错。

  1. @override
  2. Widget build(BuildContext context) {
  3. Widget current = child;
  4. if (child == null && (constraints == null || !constraints.isTight)) {
  5. current = new LimitedBox(
  6. maxWidth: 0.0,
  7. maxHeight: 0.0,
  8. child: new ConstrainedBox(constraints: const BoxConstraints.expand())
  9. );
  10. }
  11. if (alignment != null)
  12. current = new Align(alignment: alignment, child: current);
  13. final EdgeInsetsGeometry effectivePadding = _paddingIncludingDecoration;
  14. if (effectivePadding != null)
  15. current = new Padding(padding: effectivePadding, child: current);
  16. if (decoration != null)
  17. current = new DecoratedBox(decoration: decoration, child: current);
  18. if (foregroundDecoration != null) {
  19. current = new DecoratedBox(
  20. decoration: foregroundDecoration,
  21. position: DecorationPosition.foreground,
  22. child: current
  23. );
  24. }
  25. if (constraints != null)
  26. current = new ConstrainedBox(constraints: constraints, child: current);
  27. if (margin != null)
  28. current = new Padding(padding: margin, child: current);
  29. if (transform != null)
  30. current = new Transform(transform: transform, child: current);
  31. return current;
  32. }

Container的build函数不长,绘制也是一个线性的判断的过程,一层一层的包裹着widget,去实现不同的样式。

最里层的是child,如果为空或者其他约束条件,则最里层包含的为一个LimitedBox,然后依次是Align、Padding、DecoratedBox、前景DecoratedBox、ConstrainedBox、Padding(实现margin效果)、Transform。

Container的源码本身并不复杂,复杂的是它的各种布局表现。我们谨记住一点,如果内部不设置约束,则按照父节点尽可能的扩大,如果内部有约束,则按照内部来。

2.4 使用场景

Container算是目前项目中,最经常用到的一个widget。在实际使用过程中,笔者在以下情况会使用到Container,当然并不是绝对的,也可以通过其他widget来实现。

  • 需要设置间隔(这种情况下,如果只是单纯的间隔,也可以通过Padding来实现);
  • 需要设置背景色;
  • 需要设置圆角或者边框的时候(ClipRRect也可以实现圆角效果);
  • 需要对齐(Align也可以实现);
  • 需要设置背景图片的时候(也可以使用Stack实现)。

3. 例子

接下来我们试着去做一个圆角按钮,它包含以下特性:

  • 支持设置按钮的三种状态(正常态、点击态、禁用态)的色值;
  • 支持设置按钮标题;
  • 支持设置宽高;
  • 支持点击回调;

根据上面介绍,利用decoration这个属性,基本上就可以完成效果了,至于点击效果以及点击回调,则使用一个GestureDetector就可以完成了。实际的例子非常简单,在这里就不贴代码了。实际运行效果如下所示:

Container样例

3.1 注意事项

这个小控件,写起来很简单,本身没有什么难度,只是纯粹的介绍了Container的使用方法,但是有一个地方需要注意的。在控件的deactivate状态,我们需要将控件的属性初始到最开始的状态,例如在本例中,有如下代码:

  1. @override
  2. void deactivate() {
  3. super.deactivate();
  4. currentColor = widget.backgroundColor;
  5. }

这么做是为什么了?是因为在点击按钮进行页面跳转的时候,按钮处在点击态,当我们返回的时候,页面还是处在点击态,这显然就不正确了,因此需要我们手动的在deactivate状态下,将控件恢复到初始状态。但是呢,这个设置颜色,并不是说在deactivate的时候,就立马去刷新控件,而是在下次再进入这个页面的时候,再次运行build的时候,会按照这个初始值进行绘制,也就是恢复到了最开始的状态。

3.2 代码

代码Github地址,这是一个系列的项目,如果不出意外,会将Flutter中常见的二十多种布局widget都介绍一下。

4. 后话

笔者建了一个flutter学习相关的项目,github地址,里面包含了笔者写的关于flutter学习相关的一些文章,会定期更新,也会上传一些学习demo,欢迎大家关注。

5. 参考

  1. Container class